<template>
  <div class="mod-config">
    <el-form :inline="true" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="keyword" placeholder="推送名称" clearable></el-input>
        <!--        <el-input v-model="keyword" placeholder="" clearable></el-input>-->
      </el-form-item>
      <el-form-item>
        <el-input v-model="keyword" placeholder="推送状态" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="small" @click="getDataList()">查询</el-button>
        <el-button type="small" @click="getDataList()">重置</el-button>
        <!--        <el-button v-if="isAuth('news:newsCategory:save')" type="small" @click="addOrUpdateHandle()">新增课程-->
        <!--        </el-button>-->
        <el-button type="small" @click="drawer = true" style="margin-left: 16px;">新增课程</el-button>
        <el-button
          v-if="isAuth('news:newsCategory:delete')"
          type="small"
          @click="deleteHandle()"
          :disabled="dataListSelections.length <= 0"
        >批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      row-key="id"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
    >
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column align="center" type="index" header-align="center" width="80px" label="序号"></el-table-column>
      <el-table-column prop="title" header-align="center" align="center" label="推送名称"></el-table-column>
      <!--      <el-table-column-->
      <!--        label="主图"-->
      <!--        header-align="center"-->
      <!--        width="200"-->
      <!--        align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          <img :src="scope.row.img" style="width: 100px;height: 100px"/>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column prop="sort" label="开始推送时间" header-align="center" align="center"></el-table-column>
      <el-table-column prop="sort" label="归属部门" header-align="center" align="center"></el-table-column>
      <el-table-column prop="sort" label="已推送人数" header-align="center" align="center"></el-table-column>
      <el-table-column prop="sort" label="推送次数" header-align="center" align="center"></el-table-column>
      <el-table-column prop="sort" label="推送状态" header-align="center" align="center"></el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="table = true" style="margin-left: 16px;">详情</el-button>
          <el-button type="text" @click="deleteHandle(scope.row.id)">暂停</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      custom-class="learn-drawer"
      title="最新推送"
      :visible.sync="drawer"
      direction="btt"
      size="100%"
      :modal="false"
      :before-close="handleClose"
    >
      <el-container style="min-height: 100%">
        <el-header>
          <el-steps :active="step" simple>
            <el-step title="1 填写信息"></el-step>
            <el-step title="2 推送业务"></el-step>
            <el-step title="3 推送对象"></el-step>
          </el-steps>
        </el-header>
        <!--        内容-->
        <el-row v-show="step === 0">
          <el-form label-position="top">
            <div class="comm-push">
              <el-form-item label="推送名称" style="width: 70%">
                <el-input></el-input>
              </el-form-item>
              <el-form-item label="归属部门" style="width: 20%;margin-left: 20px">
                <el-input></el-input>
              </el-form-item>
            </div>
            <div class="comm-picker">
              <el-form-item label="推送时间">
                <el-date-picker type="datetime" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="任务完成时间">
                <el-date-picker type="datetime" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="推送次数">
                <el-input placeholder="推送次数"></el-input>
              </el-form-item>
              <el-form-item label="时间间隔(天)">
                <el-input></el-input>
              </el-form-item>
            </div>
            <div class="comm-miaos">
              <el-form-item label="描述">
                <el-input type="textarea"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </el-row>
        <!--        第二步-->
        <el-row v-show="step === 1">
          <el-form>
            <el-form-item>
              <el-button type="small" @click="curriculum">新增课程</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="gridData">
            <el-table-column property="date" label="日期" width="150"></el-table-column>
            <el-table-column property="name" label="姓名" width="200"></el-table-column>
            <el-table-column property="address" label="地址"></el-table-column>
          </el-table>
        </el-row>
        <!--        第三部-->
        <el-row v-show="step === 2">
          <div class="pushhrange">
            <h5>推送范围</h5>
            <el-form>
              <el-form-item>
                <el-input type="textarea"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="empty" type="small">清空</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-row>

        <el-footer class="footer">
          <el-button @click="drawerClose">关闭</el-button>
          <el-button @click="onSubmits">上一步</el-button>
          <el-button v-show="parseInt(step) < 2" type="small" @click="onSubmit">下一步</el-button>
          <el-button>保存</el-button>
        </el-footer>
      </el-container>
    </el-drawer>
    <el-drawer
      custom-class="learn-drawer"
      title="推送详情"
      :visible.sync="table"
      direction="btt"
      size="100%"
      :modal="false"
      :before-close="handleClose"
    >
      <el-container>
        <el-row class="detail-push">
          <div class="detail-jut">
            <span>推送名称</span>
            <div class="detail-pust">
              <span>推送次数</span>
              <span>时间间隔</span>
              <span>推送总人数</span>
              <span>推送进度</span>
            </div>
            <div class="detail-pust">
              <span>已推送人数</span>
              <span>任务学习人数</span>
              <span>未完成任务人数</span>
              <span>已完成任务人数</span>
            </div>
          </div>
          <el-form>
            <el-form-item label="账号">
              <el-input />
            </el-form-item>
          </el-form>
          <el-table :data="gridData">
            <el-table-column property="date" label="账号" width="150" />
            <el-table-column property="name" label="姓名" width="200" />
            <el-table-column property="address" label="归属部门" />
            <el-table-column property="date" label="推送时间" width="150" />
            <el-table-column property="name" label="推送状态" width="200" />
            <el-table-column property="address" label="任务完成情况" />
            <el-table-column property="date" label="任务完成进度" width="150" />
            <el-table-column property="name" label="任务完成时间" width="200" />
            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              width="200"
              label="操作"
            >
              <template>
                <el-button type="text">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-container>
    </el-drawer>
    <!-- 新增课程 -->
    <pushing ref="pushing" :uploadAll="pushing" :setUploadAll="setUploadAll" />

    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    />
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
    <!-- 查看评价   -->
    <comment v-if="commentVisible" ref="comment" @refreshDataList="getDataList" />
  </div>
</template>

<script>
import AddOrUpdate from './learn-vurriculum-add'
import pushing from '@/components/tuisong/pushing'
// import Comment from './comment'

export default {
  data() {
    return {
      drawer: false,
      table: false,
      type: 2,
      keyword: '',
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      commentVisible: false,
      step: 0,
      gridData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  },
  components: {
    AddOrUpdate,
    Comment,
    pushing
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    handleClick() {
      alert('button click')
    },
    drawerClose() {
      this.drawer = false
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/train/traindata/list'),
        method: 'post',
        data: {
          page: this.pageIndex,
          limit: this.pageSize,
          keyword: this.keyword
        }
      }).then(res => {
        if (res && res.code === 200) {
          this.dataList = res.data.list
          this.totalPage = res.data.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    curriculum() {
      this.$refs['uploadAll'].init()
    },
    onSubmits() {
      switch (this.step) {
        case 2:
          this.step = 1
          break
        case 1:
          this.step = 0
          break
        default:
          break
      }
    },
    onSubmit() {
      switch (this.step) {
        case 0:
          this.step = 1
          break
        case 1:
          this.step = 2
          break
        default:
          break
      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    commentHandle(id) {
      this.commentVisible = true
      this.$nextTick(() => {
        this.$refs.comment.init(id)
      })
    },
    // 删除
    deleteHandle(id) {
      var ids = id ? [id] : this.dataListSelections.map(item => item.id)
      this.$confirm(`确定要进行暂停操作吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/train/traindata/delete'),
          method: 'post',
          data: { ids: ids }
        }).then(res => {
          if (res && res.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.warning(res.msg)
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.comm-push {
  margin: 0 50px;
  display: flex;
  justify-content: space-between;
}

.comm-picker {
  margin: 0 50px;
  display: flex;
  justify-content: space-between;
}

.comm-miaos {
  margin: 0 50px;
  justify-content: space-between;
  height: 500px;
}

.footer {
  border-top: 1px solid #c3c3c3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.detail-push {
  width: 100%;
}

.detail-jut {
  margin: 20px;
  padding: 30px;
  background: #c5c9cf;
}

.detail-pust {
  display: flex;
  justify-content: space-between;
}

.pushhrange {
  margin: 30px;
  height: 300px;
}
</style>
